import {useRoutes}  from 'react-router-dom' //用于根据路由表,动态创建Routes和Route
import {Navigate}  from 'react-router-dom' //只要Navigate组件被解析,就会修改路径,切换视图

import Login from '../components/Login'
import Main from '../components/Main'
import NotFound from '../components/NotFound'
import About from '../components/Main/About'
import Home from '../components/Main/Home'
import Music from '../components/Main/Home/Music'
import News from '../components/Main/Home/News'

//配置路由表
const routes = [
    {
        path: "/login",
        element: <Login/>
    },
    {
        path: "/main",
        element: <Main/>,
        children:[
            {
                path: "/main/about",
                element: <About/>,
            },
            {
                path: "/main/home",
                element: <Home/>,
                children:[
                    {
                        path: "/main/home/music",
                        element: <Music/>
                    },
                    {
                        path: "/main/home/news",
                        element: <News/>
                    }
                ]
            }
        ]
    },
    {
        path: "/",
        element: <Navigate to="/login"/>
    },
    {
        path: "*",
        element: <NotFound/>
    },
]


//定义一个组件用来
export const GetRoutes = () => {
    return useRoutes(routes);
}
